<template>
  <el-date-picker
    :style="{ width: width }"
    v-model="element"
    type="datetimerange"
    unlink-panels
    format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
    start-placeholder="开始时间"
    end-placeholder="截止时间"
    @change="changeDateTimeRangeQuery($event)"
  />
</template>
<script lang="ts" setup>
import { watch } from 'vue';
const emit = defineEmits(['change']);
// 获取父组件传递过来的值
interface Props {
  width?: string; //服务端接口地址。和data一般是二选一，即如果是父组件已经传入了data则不不在从服务端读取数据
}
const props = withDefaults(defineProps<Props>(), {
  width: '380px'
});
//select在v-model绑定的值
const element = defineModel<Array<string>>({
  required: false,
  default: []
});
//日期开始时间
const timeBegin = defineModel<string | undefined>('timeBegin', {
  required: false,
  default: ''
});
//日期截止直接
const timeEnd = defineModel<string | undefined>('timeEnd', {
  required: false,
  default: ''
});

/**
 * 表单中自定义组件的事件，当日期范围组件中的值变动时触发
 * @param value 组件的值，日期范围是2个值
 */
const changeDateTimeRangeQuery = (value: Array<string> | null) => {
  // 当注册日期改变时触发（点击日历确定按钮后）。当手动清空日期框时，value值为null
  if (value !== null) {
    if (value.length === 2) {
      // const createTimeQueryOfBegin = value[0];
      // const createTimeQueryOfEnd = value[1];
      timeBegin.value = value[0]; // 开始日期
      timeEnd.value = value[1]; // 截止日期
    }
  } else {
    // 当日期被手动清空时
    timeBegin.value = ''; // 开始日期
    timeEnd.value = ''; // 截止日期
  }
  emit('change', value);
};
// 因为根据日历插件的特性，timeBegin和timeEnd必须同时存在，因此只要监听一个就可以。
// 即在菜单清空后，v-model主属性也要清空，可以用于清除查询条件的场景
// 注意，监听对象中的属性，只能用这种watch的写法。不能使用写法：watch(props.query.createTimeQueryOfBegin,(newVal:string,oldVal:string)=>{});
watch(
  () => timeBegin.value,
  (newVal: string | undefined, oldVal: string | undefined) => {
    if ((typeof newVal === 'undefined' || newVal === '') && oldVal !== '') {
      // 如果当前值不存在并且上一个值不为空，则说明日期被清空了
      element.value = [];
    }
  },
  { deep: true, immediate: true }
);
</script>
